
<template>
  <a-card title="Hello charts">
    <div ref="drawPos"
         class="w-75 height-12" />
  </a-card>
</template>

<script>

/**
 * @description Monitor Dashboard Component
 */

import echarts from 'echarts'
// import Api from '@api'

export default {
  data() {
    return {
      data: [100, 20, 30, 5, 2, 1]
    }
  },
  methods: {
    // Init
    init() {
      this.$nextTick(() => {
        this.drawCharts(this.data)
      })
    },
    drawCharts(data) {
      const myChart = echarts.init(this.$refs.drawPos)
      const option = {
        title: {
          text: 'ECharts'
        },
        tooltip: {},
        legend: {
          data: [
            this.$t('i18n_monitor_alarm_dashboard_sales_label')
          ]
        },
        xAxis: {
          data: [
            this.$t('i18n_monitor_alarm_dashboard_shirt_label'),
            this.$t('i18n_monitor_alarm_dashboard_Woolen_sweater_label'),
            this.$t('i18n_monitor_alarm_dashboard_snow_spins_label'),
            this.$t('i18n_monitor_alarm_dashboard_trousers_label'),
            this.$t('i18n_monitor_alarm_dashboard_high_heels_label'),
            this.$t('i18n_monitor_alarm_dashboard_socks_label')
          ]
        },
        yAxis: {},
        series: [
          {
            name: this.$t('i18n_monitor_alarm_dashboard_sales_label'),
            type: 'bar',
            data: data
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  created() {
    this.init()
  },
  components: {
  }
}
</script>
